<template>
  <view>
    <t-tabs v-model="activeTab">
      <t-tab-panel v-for="item in tabList" :value="item.value" :label="item.label" :panel="item.panelRender" />
    </t-tabs>
    <t-dialog
      v-model:visible="confirmVisible"
      header="确认提交当前所填写的配置？"
      body="提交后，配置将立即生效，且无法恢复"
      @confirm="onConfirmDelete"
      :on-cancel="onCancel"
    />
  </view>
</template>
<script setup lang="tsx">
import { ref } from 'vue';
import A from './components/1.vue';
import B from './components/2.vue';
import C from './components/3.vue';
import D from './components/4.vue';
import E from './components/5.vue';
import F from './components/6.vue';
import G from './components/7.vue';
import H from './components/8.vue';

const activeTab = ref(1);
const tabList = [
  {
    label: '基本设置',
    value: 1,
    panelRender: () => <A ref={a} onHandleClickDelete={handleClickDelete} />,
  },
  {
    label: '提现设置',
    value: 2,
    panelRender: () => <B ref={b} onHandleClickDelete={handleClickDelete} />,
  },
  {
    label: '余额宝设置',
    value: 3,
    panelRender: () => <C ref={c} onHandleClickDelete={handleClickDelete} />,
  },
  {
    label: '幸运转盘设置',
    value: 4,
    panelRender: () => <D ref={d} onHandleClickDelete={handleClickDelete} />,
  },
  {
    label: '信用设置',
    value: 5,
    panelRender: () => <E ref={e} onHandleClickDelete={handleClickDelete} />,
  },
  {
    label: '推广奖励',
    value: 6,
    panelRender: () => <F ref={f} onHandleClickDelete={handleClickDelete} />,
  },
  {
    label: '语言设置',
    value: 7,
    panelRender: () => <G />,
  },
  {
    label: '通知设置',
    value: 8,
    panelRender: () => <H ref={h} onHandleClickDelete={handleClickDelete} />,
  },
];

// 确认提交
const confirmVisible = ref(false);
const handleClickDelete = () => {
  confirmVisible.value = true;
};
const a = ref(null);
const b = ref(null);
const c = ref(null);
const d = ref(null);
const e = ref(null);
const f = ref(null);
const h = ref(null);

const componentRefs = {
  1: a,
  2: b,
  3: c,
  4: d,
  5: e,
  6: f,
  8: h,
};
const onConfirmDelete = () => {
  const currentRef = componentRefs[activeTab.value];
  if (currentRef?.value?.submit) {
    currentRef.value.submit(); // 调用当前 tab 组件的 submit 方法
    confirmVisible.value = false;
  } else {
    console.warn(`当前 tab(${activeTab.value}) 没有定义 submit 方法`);
  }
};
const onCancel = () => {
  confirmVisible.value = false;
};
</script>
